<template>
    <div class="p-[20px]">

        <el-card>
            <div slot="header"></div>
            <div>
                <el-form :model="form" :rules="rules" ref="noticeRef" label-position="" label-width="150px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model="form.name" placeholder="名称" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="类型" prop="type">
                                <el-select v-model="form.type" placeholder="请选择类型" filterable clearable>
                                    <el-option
                                        v-for="item in [{ lable: '独立', value: 1 }, { lable: '加盟', value: 2 }, { lable: '连锁', value: 3 }]"
                                        :key="item.value" :label="item.lable" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="连锁机构" prop="merchantLinkName"
                                v-if="form.type == '3' || form.type == '2'">
                                <!-- filterable搜索  allow-create 创建新的选项  -->
                                <el-select @change="sChange" v-model="form.merchantLinkName" default-first-option
                                    allow-create placeholder="请选择连锁机构" filterable clearable>
                                    <el-option v-for="item in listMerchantLink" :key="item.merchantLinkId"
                                        :label="item.name" :value="item.merchantLinkId" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="所属行业" prop="industryName">
                                <el-input v-model="form.industryName" placeholder="所属行业" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属系统" prop="industrySystemName">
                                <el-input v-model="form.industrySystemName" placeholder="所属行业" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="所在地区" prop="addressArea">
                                <el-input v-model="form.addressArea" placeholder="所在地区" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="详细地址" prop="addressDetail">
                                <el-input v-model="form.addressDetail" placeholder="所在地区" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="单位电话" prop="name">
                                <el-input v-model="form.name" placeholder="单位电话" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="form.email" placeholder="邮箱" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="软件版本" prop="merchantAppVersionName">
                                <el-input v-model="form.merchantAppVersionName" placeholder="软件版本" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="版本期限" prop="merchantAppVersionExpire">
                                <el-input v-model="form.merchantAppVersionExpire" placeholder="版本期限" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="营业执照" prop="businessLicense">
                                <ImageUpload v-model="form.businessLicense" :disabled="formDisable" />
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="门面照" prop="doorFace">
                                <ImageUpload v-model="form.doorFace" :disabled="formDisable" />
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="行业许可证" prop="industryLicense">
                                <ImageUpload v-model="form.industryLicense" :disabled="formDisable" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="药师执业许可证" prop="pharmacistLicense">
                                <ImageUpload v-model="form.pharmacistLicense" :disabled="formDisable" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="医师执业许可证" prop="pharmacistLicense">
                                <ImageUpload v-model="form.pharmacistLicense" :disabled="formDisable" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="消防安全许可证" prop="fireSafetyCertificate">
                                <ImageUpload v-model="form.fireSafetyCertificate" :disabled="formDisable" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="食品安全许可证" prop="foodSafetyCertificate">
                                <ImageUpload v-model="form.foodSafetyCertificate" :disabled="formDisable" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="其他相关证件" prop="otherCertificate">
                                <ImageUpload v-model="form.otherCertificate" :disabled="formDisable" />
                            </el-form-item>
                        </el-col>

                    </el-row>



                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="法人姓名" prop="legalPersonName">
                                <el-input v-model="form.legalPersonName" placeholder="法人姓名" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="法人手机号" prop="legalPersonPhone">
                                <el-input v-model="form.legalPersonPhone" placeholder="法人手机号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-col :span="24">
                        <el-form-item label="法人身份证号" prop="legalPersonIdcardNum">
                            <el-input v-model="form.legalPersonIdcardNum" placeholder="法人身份证号" maxlength="30" />
                        </el-form-item>
                    </el-col>


                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="法人身份证正面" prop="legalPersonIdcardFront">
                                <ImageUpload v-model="form.legalPersonIdcardFront" :disabled="formDisable" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="法人身份证反面" prop="legalPersonIdcardBack">
                                <ImageUpload v-model="form.legalPersonIdcardBack" :disabled="formDisable" />
                            </el-form-item>
                        </el-col>

                    </el-row>



                </el-form>
            </div>
        </el-card>

    </div>


</template>

<script setup>
import { authApibindmerchantinfo } from '@/api/login.js'

const formDisable = ref(true)

const data = reactive({
    form: {},
    queryParams: {
        currentPage: 1,
        pageSize: 10,
        name: undefined,
        phone: undefined,
        status: undefined,
    },
    rules: {
    },
});

const { queryParams, form, rules } = toRefs(data);

authApibindmerchantinfo().then((res) => {
    form.value = res
})


// 获取连锁机构
import {
    merchantLinkApiList
} from "@/api/backMerchantLink/backMerchantLink.js";
let listMerchantLink = []
merchantLinkApiList().then((res) => {
    listMerchantLink = res.records
})
// 改变连锁机构
const sChange = (e) => {
    if (listMerchantLink.find(i => i.merchantLinkId == e)) {
        form.value.merchantLinkId = e
        let merchantLinkName = listMerchantLink.find(i => i.merchantLinkId == e)?.name
        form.value.merchantLinkName = merchantLinkName
    } else {
        form.value.merchantLinkName = e
    }
}



</script>
<style lang='scss' scoped></style>